<template>
  <div id="app">
    <category title="美食">
      <!--   插入你想插入的标签 内部插槽可以渲染 用slot来指定插入哪个插槽里面  -->
      <img slot="demo"
          src="https://ts1.tc.mm.bing.net/th/id/R-C.aa0c40317812024f29929629c944e403?rik=AvTKZQW8fWMELg&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50095%2f2641.jpg_wh1200.jpg&ehk=ryd8RMPeag3orATYY%2bg236F3Keidn%2fWY5LRoiUwoP94%3d&risl=&pid=ImgRaw&r=0"
          alt="">
      <a href="#" slot="test">更多美食</a>
    </category>
    <category title="电影">
      <video src="https://www.bilibili.com/video/BV1ASWrzeE9u/" controls slot="demo"></video>
<!--      注意:这种指定插槽名字的写法 只能在template中 -->
      <template v-slot:test>
        <div class="center">
          <a href="#">热门</a>
          <a href="#">最新</a>
          <a href="#">好评最多</a>
        </div>
        <div class="footer">更多影视欢迎来观看！</div>
      </template>
    </category>
    <category title="游戏">
      <ul slot="test">
        <li v-for="(item,index) in games" :key="index">{{ item }}</li>
      </ul>
      <div class="footer" slot="test">
        <a href="#">单机游戏</a>
        <a href="#">网络游戏</a>
      </div>
    </category>
  </div>
</template>

<script>
import category from "@/components/Category.vue";

export default {
  name: 'App',
  components: {
    category
  },
  data() {
    return {
      foods: ['臭豆腐', '火锅', '胡辣汤', '水煎包'],
      films: ['奇迹笨小孩', '长津湖', '南京照相馆', '长津湖之水门桥'],
      games: ['cs2', 'lol', 'cf', '瓦', '三角洲']
    }
  }
}
</script>

<style>
#app,.center,.footer {
  display: flex;
  justify-content: space-around;
}

/* 插槽的样式 可以写在组件里 也可以写在app里 */
img {
  width: 100%;
}

video {
  width: 100%;
}
</style>
